<template>
	<view class="pagination">
		<text :disabled="page <= 1" @click="gotoPage(page - 1)"> {{'<'}}</text>
		<text v-for="(item,index) in pages" :key="getItemKey(item)"
			:class="{ active: item === page, ellipsis: item === '...' }" @tap="()=>gotoPage(item)">{{ item }}</text>

		<text :disabled="page >= totalPages" @click="gotoPage(page + 1)">{{'>'}}</text>
	</view>
</template>

<script>
	export default {
		name: 'Pagination',
		props: {
			total: { // 总条目数
				type: Number,
				required: true
			},
			pageSize: { // 每页显示的条目数
				type: Number,
				default: 10
			},
			currentPage: { // 当前页码
				type: Number,
				default: 1
			}
		},
		computed: {

			totalPages() { // 总页数
				return Math.ceil(this.total / this.pageSize)
			},
			page() { // 当前页码，限定在 1 和总页数之间
				return Math.max(1, Math.min(this.currentPage, this.totalPages))
			},
			pages() { // 可点击的页码数组，最多显示 5 个页码
				const arr = []
				let start = Math.max(this.page - 2, 1)
				let end = Math.min(start + 4, this.totalPages)
				if (end - start < 4) {
					end = Math.min(start + 4, this.totalPages)
					start = Math.max(end - 4, 1)
				}
				for (let i = start; i <= end; i++) {
					arr.push(i)
				}
				
				if (end < this.totalPages) {
					arr.push('...', this.totalPages)
				}
				return arr
			}
		},
		methods: {
			testll(a) {
				console.log(a);
			},
			getItemKey(item) { // 获取项的 key
				return typeof item === 'number' ? item.toString() : item
			},
			gotoPage(page) { // 跳转到指定页码
				console.log(page);
				if (page > 0 && page <= this.totalPages) {
					this.$emit('page-change', page)
				}
			},
		
		}
	}
</script>

<style scoped>
	.pagination {
		display: flex;
		align-items: center;
		justify-content: right;
		margin-top: 20px;
	}

	text {
		display: inline-block;
		padding: 12rpx 20rpx;
		background-color: #fff;
		border: 1px solid #ddd;
		border-radius: 3px;
		margin-right: 10px;
		margin-bottom: 10px;
		color: #3c9cff;
	}

	text.active {
		background-color: #3c9cff;
		color: #fff;
	}

	text.ellipsis {
		cursor: default;
	}
</style>
